<template>
	<view class="news_big_item" @click="toDetail">
		<u-image width="100%" height="340" :src="item.pageImg" border-radius="8">

		</u-image>
		<view class="main_tit">
			{{item.newsName || "暂无"}}
		</view>
		<view class="sub_tit">
			{{item.remark}}
		</view>
		<view class="msg">
			<view class="source">
				<view class="s_con">
					<!-- 	<u-image width="33" height="33" class="img" src="http://www.people.com.cn/img/2016people/images/rmw_logo.png"
					 shape="circle">
					</u-image> -->
					<text class="text"> {{item.source}}</text>
				</view>

				<!-- <view class="tag">{{item.columnList[0].columnName}}</view>
				<view class="tag" v-if="item.columnList.length>1">...</view> -->
			</view>
			<view class="right">
				<view class="time">
					<text class="iconfont iconriqi"></text>
					<text class="txt">{{handleDate(item.showDate, 'yyyy-MM-dd')}}</text>
				</view>
				<view class="counts">
					<text class="iconfont icondianzan"></text>
					<text class="txt">{{handleCount(item.goodNum,10000)}}</text>
					<text class="iconfont iconchakanliang"></text>
					<text class="txt">{{handleCount(item.lookNum,10000)}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		handleDate,
		handleCount
	} from '@/utils/util.js'
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			handleDate,
			handleCount,
			toDetail() {
				if (this.item.type == 0) {
					this.navigateTo({
						url: `/pages/main/news/detail/index?newsCode=${this.item.newsCode}`
					})
				} else {
					this.navigateTo({
						url: `/pages/main/news/detail/imageDetail?newsCode=${this.item.newsCode}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/commom/styles/icons.css";

	.news_big_item {
		width: 100%;
		position: relative;
		padding: 20rpx 0;

		.main_tit {
			width: 100%;
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-top: 15rpx;
		}

		.sub_tit {
			margin-top: 7rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.msg {
			width: 100%;
			margin-top: 19rpx;
			display: flex;
			justify-content: space-between;

			.source {
				width: 320rpx;
				display: flex;
				font-weight: 400;
				color: #333333;
				font-size: 22rpx;

				.s_con {
					display: flex;
					flex: 1;

					.text {
						width: 100rpx;
						word-break: break-all;
						overflow: hidden; // 超出的文本隐藏
						text-overflow: ellipsis; // 溢出用省略号显示
						white-space: nowrap; // 溢出不换行
					}

					.img {
						margin-right: 13rpx;
					}
				}


				.tag {
					height: 34rpx;
					line-height: 34rpx;
					padding: 0 16rpx;
					font-size: 20rpx;
					background: #FF7D77;
					border-radius: 5rpx;
					color: #fff;
					// margin-left: 76rpx;
					margin-right: 6rpx;
				}
			}

			.right {
				color: #9E9E9E;
				display: flex;
				font-size: 24rpx;

				.time {
					// margin-left: 36rpx;
					margin-right: 20rpx;
				}

				.txt {
					line-height: 33rpx;
				}

				.iconfont {
					font-size: 25rpx;
					margin-right: 10rpx;
				}

				.iconchakanliang {
					margin-left: 20rpx;
				}
			}

		}
	}
</style>
